<template>

  <div id="detail">
    <!-- 头部图片 -->
    <div class="banner" v-for="item in list" :key="item.id">
      <img class="aaa" :src="item.url" alt="" />
      <van-icon
        class="bbb"
        color="#646464"
        name="arrow-left"
        size="1em"
        @click="goclassify"
      />
      <img class="ccc" src="../../assets/详情img/4.png" alt="" />
    </div>
    <!-- 商品价格 简介 -->
    <div class="page" v-for="a in list" :key="a.id">
      <span class="price">¥{{ a.price }}0</span>
      <span class="title"> {{ a.name }} </span>
      <p class="brief">
        {{ a.detail }}
      </p>
      <div class="time">
        <span class="abc">配送</span>
        <span class="bcd">最快09:00-09.30 送达</span>
        <div class="van-hairline--bottom"></div>
        <div class="van-hairline--top"></div>
      </div>
    </div>
    <!-- 评论 -->
    <div class="comment" v-for="g in list" :key="g.id">
      <span>评论 1W+</span>
      <van-icon
        class="commenta"
        name="arrow"
        size="0.5rem"
        color="#646464"
        @click="gocomments(g.id)"
      />
      <img class="wyz" src="../../assets/详情img/wyz.jpg" alt="" />
      <span class="names">萧山吴彦祖</span>
      <p>非常新鲜，口感爆炸</p>
     <div class="van-hairline--top"></div>
    </div>
    <!-- 做法推荐 -->
    <div class="hop">
      <span>新品推荐</span>
      <van-icon
        class="hopa"
        name="arrow"
        size="0.5rem"
        color="#646464"
        @click="gorecipe"
      />
      <div class="xxk">
        <i @click="num = 1">彦祖同款</i>
        <i @click="num = 2">杰哥同款</i>
        <i @click="num = 3">俊俊同款</i>
        <div class="xxka" v-if="num === 1">
          <img src="../../assets/详情img/2.png" alt="" />
          <span>卡式酸奶</span>
          <p>¥13.50</p>
        </div>
        <div class="xxkb" v-if="num === 2">
          <img src="../../assets/详情img/3.png" alt="" />
          <span>树莓</span>
          <p>¥18.90</p>
        </div>
        <div class="xxkc" v-if="num === 3">
          <img src="../../assets/详情img/2.png" alt="" />
          <span>卡式酸奶</span>
          <p>¥13.50</p>
        </div>
      </div>
    </div>
    <!-- 底部加入购物车 -->
    <div class="foont" v-for="c in list" :key="c.id">
      <img src="../../assets/菜谱img/sc.png" alt="" />
      <button class="btn" @click="inCart(c.id)">加入购物车</button>
    </div>
    </div>
 
</template>

//
<script>
import { mapState } from "vuex";
export default {
  name: "Detail",
  data() {
    return {
      num: 1,
      list: [],
    };
  },
  mounted() {
    this.getList();
  
  },
  methods: {
    inCart(id) {
      console.log(id);
      this.$store.commit("inCart", id);
      this.$router.push("/cart");
    },
    goclassify() {
      this.$router.push("/classify");
    },
    gocomments(id) {
      console.log(id)
      this.$router.push({
        path: "/comments",
        query: {
          id: id,
        },
      });
    },
    gorecipe() {
      this.$router.push("/recipe");
    },
    getList() {
      this.list = this.goodslist.filter((el) => el.id == this.$route.query.id);
      console.log(this.list);
    },
  },
  computed: {
    ...mapState(["goodslist"]),
  },
};
</script>

<style lang="less" scoped>

.van-hairline--top{
   position: absolute;
  height: 1px;
  width: 748px;
  bottom: 0;
}
.van-hairline--bottom{
  position: absolute;
  height: 1px;
  width: 748px;
  top: 0;
}
.banner {
  width: 100%;
  height: 753px;
  background: chocolate;
  position: relative;
  top: 0;
  left: 0;
}
.aaa {
  width: 100%;
  height: 753px;
}
.bbb {
  position: absolute;
  top: 24px;
  left: 39px;
}
.ccc {
  width: 55px;
  height: 55px;
  position: absolute;
  right: 33px;
  top: 25px;
}
.page {
  width: 100%;
  height: 330px;
  position: relative;
  background: #fff;
}
.price {
  position: absolute;
  top: 40px;
  left: 40px;
  font-size: 40px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #646464;
}
.title {
  position: absolute;
  top: 113px;
  left: 39px;
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #646464;
}
.brief {
  position: absolute;
  top: 170px;
  left: 39px;
  width: 700px;
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #646464;
}
.time {
  position: absolute;
  top: 259px;
  left: 40px;
  width: 748px;
  height: 70px;
  display: flex;
  align-items: center;
}
.abc {
  font-size: 35px;
  font-family: PingFang SC;
  font-weight: 700;
  color: #646464;
}
.bcd {
  width: 274px;
  height: 25px;
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #909090;
  margin-left: 20px;
}
.comment {
  height: 234px;
  width: 100%;
  position: relative;
  background: #fff;
}
.comment span {
  position: absolute;
  top: 19px;
  left: 39px;
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4d4c4c;
}
.commenta {
  position: absolute;
  right: 41px;
  top: 19px;
}
.wyz {
  position: absolute;
  top: 66px;
  left: 32px;
  width: 121px;
  height: 121px;
}
.comment .names {
  position: absolute;
  top: 104px;
  left: 163px;
  font-size: 33px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #646464;
}
.comment p {
  position: absolute;
  top: 174px;
  left: 163px;
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #646464;
}

.hop {
  height: 530px;
  width: 100%;
  position: relative;
  background: #fff;
}
.hop span {
  position: absolute;
  top: 17px;
  left: 39px;
  font-size: 37px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #646464;
}
.hopa {
  position: absolute;
  right: 41px;
  top: 20px;
}
.hop .xxk {
  position: absolute;
  top: 60px;
  left: 40px;
  margin: 0 auto;
  width: 748px;
  height: 420px;
}
.xxk i {
  margin-bottom: 300px;
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #909090;
  margin-right: 60px;
}
.xxka,
.xxkb,
.xxkc {
  height: 338px;
  width: 748px;
  position: relative;
}
.xxka img,
.xxkb img,
.xxkc img {
  width: 200px;
  height: 200px;
}
.xxka p,
.xxkb p,
.xxkc p {
  position: absolute;
  top: 250px;
  left: 40px;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ff5b5b;
}
.xxka span,
.xxkb span,
.xxkc span {
  position: absolute;
  top: 200px;
  left: 35px;
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #3d3d3d;
}
.foont {
  height: 98px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
}
.foont img {
  width: 62px;
  height: 47px;
  position: absolute;
  left: 41px;
  top: 25px;
}
.foont .btn {
  position: absolute;
  right: 39px;
  top: 26px;
  width: 539px;
  height: 46px;
  background: #ffcc00;
  border-radius: 20px;
  border: none;
  font-size: 30px;
  font-weight: 400;
  color: #fefefe;
}
</style>
